<template>
  <div>
    <div class="cbg">
      <div class="uploadcontent">
        <div class="setpcon">
          <img src="./img/setp_car_2.png"/>
        </div>

        <h3>保单 <span @click="showPcar2()" class="cdemo">查看示例</span></h3>

        <ul>
          <li>
            <div class="upimgfile">
              <div class="upImgs" v-if="!$store.state.carInfo.jqxAttid">
                <img src="./img/car_jqx.png"/>
                <p>交强险</p>
              </div>
              <div v-else class="upImgSuc">
              <img :src="$store.state.baseImgUrl+$store.state.carInfo.jqxAttid"/>
              </div>
              <fileupload ref="jqxPic" @uploadsucess="jqxsuccess"></fileupload>
          </div>
          </li>
          <li>
            <div class="upimgfile">
              <div class="upImgs" v-if="!$store.state.carInfo.syxAttid">
                <img src="./img/car_jqx.png"/>
                <p>商业险</p>
              </div>
              <div v-else class="upImgSuc">
                <img :src="$store.state.baseImgUrl+$store.state.carInfo.syxAttid"/>
              </div>
              <fileupload ref="syxPic" @uploadsucess="syxsuccess"></fileupload>
          </div>

          </li>

        </ul>
        <div class="updesc">

          请在光线充足地方拍摄交强险和商业险，保持
          <span style="color: #FF2126">字体及图片清晰可辨；</span>

          商业险需购买车损险及保额不低于50万元的第三者责任险。

        </div>
      </div>
    </div>


    <div class="cbg"  >
      <div class="lbox">
        <ul>
          <li>
            <label class="labelName">月租金</label>
            <div  class="labelCon moneylabel" style="color:#FF2126">
              <input class="moneyBox mputBox" placeholder="请输入租金"  @input="oninput" style="color:red;" v-model="$store.state.carInfo.monthMoney"/>
            </div>
          </li>
          <li>
            <label class="labelName">结算周期</label>
            <div class="labelCon">
              <el-radio-group v-model="$store.state.carInfo.jsType">
                <el-radio :label="'M'">月度</el-radio>
                <el-radio :label="'Q'">季度</el-radio>
                <el-radio :label="'Y'">年度</el-radio>
              </el-radio-group>
            </div>

          </li>
          <div class="zftips">
            <p>
              租车企业需一次性支付租金<label style="color:#FF2126">
              <span v-if="$store.state.carInfo.jsType =='M'">{{$store.state.carInfo.monthMoney}}</span>
              <span v-if="$store.state.carInfo.jsType =='Q'">{{$store.state.carInfo.monthMoney | accMul(3)}}</span>
              <span v-if="$store.state.carInfo.jsType =='Y'">{{$store.state.carInfo.monthMoney | accMul(12)}}</span>

            </label>元
            </p>
            <p>注：车辆信息通过后，预计将在2个工作日内审核通过并发布信息，请您耐心等待，感谢您的支持！</p>
          </div>
        </ul>
      </div>
    </div>
    <div class="cbg" style="background: none;">
      <div class="txxy">
        <el-checkbox v-model="checked"></el-checkbox>
        我同意以车主本人身份证进行个体工商户登记

        <span style="color:#333"></span>
        <div class="libtn">
          <p></p>
          <button class="buttonOk" @click="saveinfo()">提交</button>
        </div>
      </div>



    </div>

  </div>
</template>

<script>
  export default {
    name: "pcar1",
    data(){
      return{
        radio:'',
        carInfos:'',
        checked:true
      }
    },
    created(){
      var x = localStorage.getItem('cinfo')
      if(x){
        this.$store.commit('setCarInfo',JSON.parse(x))
      }
      this.getcar();
    },
    methods:{
      oninput(e) {
        var that = this
        // 通过正则过滤小数点后两位
        e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
        that.$store.state.carInfo.monthMoney = e.target.value;
        // console.log('e', e.target.value)
      },
      jqxsuccess(obj){
        this.$store.state.carInfo.jqxAttid = obj.data;

        localStorage.setItem('cinfo',JSON.stringify(this.$store.state.carInfo))
      },
      syxsuccess(obj){
        this.$store.state.carInfo.syxAttid = obj.data;
        localStorage.setItem('cinfo',JSON.stringify(this.$store.state.carInfo))
      },

      showPcar2(){
        this.$card({
          name: 'pcar2_demo',
          width: '100%',
          title: '查看示例',
          funCode: 'pcar2_demo',
          callback: (close, str) => {
          close()
          // this.$refs.table.reload()
        }
      })
      },
      getcar(){
        this.$http.get('yxc/car/viewByWxUserId').then(res=>{
          if(res.code == 200){
          this.carInfos = res.data

        }
      })
      },
      saveinfo(){

        if(!this.$store.state.carInfo.jqxAttid || !this.$store.state.carInfo.syxAttid){
          this.$toast('请上传交强险和商业险照片')
          return false;
        }if(!this.$store.state.carInfo.monthMoney || !this.$store.state.carInfo.jsType){
          this.$toast('请填写月租金和结算周期')
          return false;
        }
        // if(this.$store.state.carInfo.monthMoney<3000 || this.$store.state.carInfo.monthMoney>20000){
        //   this.$toast('月租金应该在3000-20000之间')
        //   return false;
        // }
        if(!this.checked){
          this.$toast('请同意以车主本人身份证进行个体工商户登记')
          return false;
        }
        var totalMoney=this.$store.state.carInfo.monthMoney
        if(this.$store.state.carInfo.jsType=='Q'){
          totalMoney=this.$options.filters.accMul(totalMoney,4)
        }
        if(this.$store.state.carInfo.jsType=='Y'){
          totalMoney=this.$options.filters.accMul(totalMoney,12)
        }

        if(totalMoney>100000){
          this.$toast('单笔租金结算金额不能超过10万元，请调整您的月租金或租用期限')
          return false;
        }
        var pdata={
          "carAttachList": [
            {
              "attachmentId": this.$store.state.carInfo.xszZmAttid,
              "fileName": "行驶证正本",

              "fileType": "face",
            },
            {
              "attachmentId": this.$store.state.carInfo.xszFmAttid,
              "fileName": "行驶证副本",

              "fileType": "back",
            },
            {
              "attachmentId": this.$store.state.carInfo.jqxAttid,
              "fileName": "交强险",

              "fileType": "jqx",
            },
            {
              "attachmentId":this.$store.state.carInfo.syxAttid,
              "fileName": "商业险",
              "fileType": "syx",
            },
          ],
          operateType:this.carInfos.certStatus?1:0,
          "cycle":this.$store.state.carInfo.jsType,//结算周期,
          "carNumber":this.$store.state.carInfo.xszZmANum,//车牌
          "engineNo":this.$store.state.carInfo.engineNo,//发动机号码
          "monthAmount": this.$store.state.carInfo.monthMoney,//月租金
          "ownerName": this.$store.state.carInfo.xszZmAOwner,//车主
          "vinNo": this.$store.state.carInfo.vinNo,//车辆识别代号

        }
        this.$http.post('yxc/car/submit',pdata).then(res=>{
          if(res.code == 200){
            localStorage.removeItem('cinfo');
            this.$toast('提交成功，请等待审核',2500)
            setTimeout(()=>{

              this.$router.replace({
              path:'/personCar',
              query:{
                funCode:'personHome'
              }
            })
            },3000)
          }else{
              this.$mPromot({
                width: '80%',
                title: '提示',
                funCode: 'comfims',
                props: {
                  btn2:'确定',
                  info: '<span style="color:red">'+res.message+'</span>'
                },
                callback: (close,str) => {
                close();
                    // if(str){}else{}
                }
            })
          }

        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .upimgfile{
    overflow: hidden;
  }
  .moneylabel{
     position: relative;
  }
  .moneylabel:after{
    display: block;
    position: absolute;
    content: '元';
    color:red;
    width:20px;height:20px;
    z-index: 9;
    right:10px;
    top:0;
  }
  .moneylabel{
    input{outline: none; width:100%;margin-right:30px;}
  }
  .libtn {
    border: none;
    text-align: center;
    .buttonOk {
      padding:10px 0;
      border-radius: 5px;
      border: none;
      background:rgba(28,103,255,1);
      color: #FFF;
      font-size: 35px;
      /*box-shadow: 0 10px 20px rgba(102, 177, 255, .3);*/
      width: 90%;
      font-size:18px;
      margin-bottom: 10px;
    }.buttonCancle {
       padding:10px 0;
       border-radius: 5px;

       border:1px solid rgba(191,191,191,1);
       background: #FFF;
       color: #666;
       font-size: 35px;
       /*box-shadow: 0 10px 20px rgba(102, 177, 255, .3);*/
       width: 90%;
       font-size:18px;
     }
  }
  .txxy{font-size:12px; color:#999;}
  .zftips{font-size:12px; color: #999; p{margin:0;padding:0;} padding:10px 0;}
  .lbox{
    padding:0 10px;
    li{border-bottom: 1px solid #eee;padding:15px 0; font-size: 14px;
      display: flex;
      .labelName{width:90px;}
      .labelCon{
        width:100%;
      }
    }
  }
  .el-radio{
    margin-right: 10px;
  }
  .setpcon{
    background:rgba(67,140,253,1);
    border-radius:10px;
    img{width:100%;}
    padding:15px 20px;
    margin-bottom: 20px;
  }

  .upImgs{
    img{height:90px; opacity: .8}
    text-align: center;
    p{
      text-align: center;
      margin:0;padding:0;font-size:14px;color:#999;
    }
    margin:5px;
  }
  .upImgSuc{
    margin:5px;
    overflow: hidden;
    img{height:110px; width:100%; }
  }
  .updesc{font-size:12px; color:#999; margin-top:15px;}

  .cbg{margin-bottom:10px;padding:10px; background: #FFF;}
  .uploadcontent{
    h3{
      font-size:18px;
      position: relative;
      margin:0;padding: 0;
      font-weight: 400;
      color:rgba(51,51,51,1);
      margin-bottom: 10px;
      .cdemo{font-size:14px; position: absolute; right:10px; top:5px; font-weight:normal; color:#1C67FF;}
    }
    ul{
      display: flex;
      padding:5px 0;
      li{
        width:50%;
        .upimgfile{
          background:rgba(245,248,255,1);
          margin:0 5px;
          border-radius: 8px;
          padding:5px;
          position: relative;
        }
      }
    }

  }
</style>
